<template>
    <div id="member">
        <head-member>
            <div class="userTop" slot="user">
                <img class="aviator" src="../../_temp/aviator.png">
                <p class="username">用户名</p>
            </div>
        </head-member>
        <div class="container">
            <section class="block order-status">
                <ul class="clearfix">
                    <li class="active"><span>全部</span></li>
                    <li><span>审核中</span></li>
                    <li><span>待发布</span></li>
                    <li><span>发布中</span></li>
                </ul>
                <dl class="status-list">
                    <dd class="item">
                        <div class="m1">
                            <h4>刘某某和李某某的婚宴,欢迎参加...</h4>
                            <span>审核中</span>
                        </div>
                        <div class="m2">
                            <div class="attribute">
                                <span>属性:<b>16</b>字</span>
                                <span>左右翻屏</span>
                                <span>2017/03/02</span>
                                <span>07:00~09:00</span>
                            </div>
                            <div class="price">￥<b>20</b></div>
                            <div class="btn review">正在审核，敬请关注</div>
                        </div>
                    </dd>
                    <dd class="item">
                        <div class="m1">
                            <h4>刘某某和李某某的婚宴,欢迎参加...</h4>
                            <span>审核中</span>
                        </div>
                        <div class="m2">
                            <div class="attribute">
                                <span>属性:<b>16</b>字</span>
                                <span>左右翻屏</span>
                                <span>2017/03/02</span>
                                <span>07:00~09:00</span>
                            </div>
                            <div class="price">￥<b>20</b></div>
                            <div class="btn review">正在审核，敬请关注</div>
                        </div>
                    </dd>
                    <dd class="item">
                        <div class="m1">
                            <h4>刘某某和李某某的婚宴,欢迎参加...</h4>
                            <span>审核中</span>
                        </div>
                        <div class="m2">
                            <div class="attribute">
                                <span>属性:<b>16</b>字</span>
                                <span>左右翻屏</span>
                                <span>2017/03/02</span>
                                <span>07:00~09:00</span>
                            </div>
                            <div class="price">￥<b>20</b></div>
                            <div class="btn review">正在审核，敬请关注</div>
                        </div>
                    </dd>
                    <dd class="item">
                        <div class="m1">
                            <h4>刘某某和李某某的婚宴,欢迎参加...</h4>
                            <span>审核中</span>
                        </div>
                        <div class="m2">
                            <div class="attribute">
                                <span>属性:<b>16</b>字</span>
                                <span>左右翻屏</span>
                                <span>2017/03/02</span>
                                <span>07:00~09:00</span>
                            </div>
                            <div class="price">￥<b>20</b></div>
                            <div class="btn review">正在审核，敬请关注</div>
                        </div>
                    </dd>
                </dl>
            </section>

        </div>
        <foot-menu></foot-menu>
    </div>
</template>
<style lang="scss" scoped>
    .userTop{
        box-sizing: border-box;
    }
    .aviator{
        width: 3rem;
        height: 3rem;
        border-radius: 50%;
        text-align: center;
        margin: 0 auto;
        background-color: #ffffff;
        display: block;
    }
    .username{
        font-weight: 600;
        font-size: 0.8rem;
    }
    .container{
        margin-top: 0.8rem;
    }
    .order-status{
        ul {
            border-bottom: 0.05rem solid #DBDBDB;
            li{
                float: left;
                width: 25%;
                box-sizing: border-box;
                font-size: 0.75rem;
                height: 1.95rem;
                text-align: center;
            span{
                color: inherit;
                line-height: 1.5;
                padding: 0.5rem 0 0.3rem;
                display: inline-block;
                font-weight: 600;
                box-sizing: border-box;

            }
            &.active{
                 color:#55BD47;
                span{
                    border-bottom: 0.1rem solid #55BD47;
                    }
                }
            }
        }
        .status-list{
            >.item{
                padding-left:1rem ;
                .m1{
                    position: relative;
                    border-bottom: 0.05rem solid #efefef;
                    padding-right:1rem ;
                    padding-bottom: 0.3rem;
                    h4 {
                        font-size: .8rem;
                        width: 60%;
                        line-height: 1.5;
                        font-weight: 600;
                    }
                    span{
                        position: absolute;
                        top:0;
                        right:1rem;
                        font-size: 0.6rem;
                        width: 40%;
                        text-align: right;
                        font-weight: bold;
                        color: #DB0000;
                        box-sizing: border-box;
                    }
                }
                .m2{
                    position: relative;
                    padding-right:1rem ;
                    padding-top:0.3rem ;

                    .attribute{
                        width: 60%;
                        height: 3.2rem;
                        span{
                            display: inline-block;
                            color: #B1B1B1;
                            line-height:1.5;
                        }
                    }
                    .price{
                        font-family: "微软雅黑";
                        color: #FF6B1a;
                        position: absolute;
                        top: 0.3rem;
                        right: 1rem;
                    }
                    .review{
                        position: absolute;
                        right: 1rem;
                        bottom: 0;
                        border: 1px solid #8BD282;
                        color: #52BC44;
                        border-radius: .1rem;
                    }

                }
            }
        }


    }


</style>
<script>
    import headMember from '../../components/header/headMember'
    import footMenu from '../../components/footer/footMenu.vue'
    import {mapGetters} from "vuex";
    export default{
        data() {
            return {
                page: 0
            }
        },
        components: {
            headMember,
            footMenu
        },
        computed:{
            ...mapGetters([
                "userInfo"
            ])
        },
    }
</script>